<template>
  <div class="appbox">
    <div class="head">
      <img
        src="https://p0.meituan.net/movie/735c6d41ab8b2fea6d24044cf240be5755223.jpg"
        alt=""
      >
      <div class="guanzhu">
        <span class="zhu">+</span>
        <span class="guan">关注</span>
      </div>
      <div class="name">
        <div class="ch-name">马思唯</div>
      </div>
      <div class="hint">
        <div class="jtou"></div>
        <span>点击关注,不错过TA最新的演出消息哦~</span>
      </div>
    </div>

    <div class="conten">
      <div class="con">
        <div>
          <strong>马思唯 参加的演出</strong>
        </div>
      </div>
      <div class="box">
        <div class="tu-left"></div>
        <span>2021郑州造氧音乐节</span>
        <p class="shijie">2021.5.22 - 2021.5.23</p>
        <p class="didian">新密市</p>
        <div class="yuyue">预约</div>
      </div>
      <div class="box">
        <div class="tu-left"></div>
        <span>2021郑州造氧音乐节</span>
        <p class="shijie">2021.5.22 - 2021.5.23</p>
        <p class="didian">新密市</p>
        <div class="yuyue">预约</div>
      </div>
      <div class="box">
        <div class="tu-left"></div>
        <span>2021郑州造氧音乐节</span>
        <p class="shijie">2021.5.22 - 2021.5.23</p>
        <p class="didian">新密市</p>
        <div class="yuyue">预约</div>
      </div>

      <div class="xunyan">
        <div class="xun-top">
          <div class="left-tu">
            <img
              src="https://img.meituan.net/kylisean/443c6b0f6193f6d6d0713ed5b876f25347199.jpg@198w_268h_1c_1e"
              alt=""
              class="bigtu"
            >
            <img
              src=""
              alt=""
              class="xuntu"
            >
          </div>
          <div class="right-zi">
            <div class="xun-name">2021马思唯「黑马」全国巡演</div>
            <div class="xun-bt">
              <img
                src=""
                alt=""
              >
              <div class="slong">
                <div class="xun-biao">一个“意想不到”的live「大计划」正在诞生</div>
              </div>
              <img
                src=""
                alt=""
                class="xunyan-smtu"
              >
            </div>
          </div>
        </div>
        <div class="xun-bottom">
          <div class="yan-didian">
            <span>济南</span>
            <img
              src=""
              alt=""
              class="jinan"
            >
          </div>
          <div class="yan-time">
            <div class="label">演出时间</div>
            <div class="dat">2021.4.21 20:00周三</div>
          </div>
          <div class="yan-qiang">
            <div class="qiangpiao">去抢票</div>
          </div>
        </div>
      </div>

      <div class="follow">
        <div class="inner">
          <div class="tx"></div>
          <div class="wz">
            <div class="diyi">点击关注,不错过TA</div>
            <div class="dier">最新的演出消息哦~</div>
          </div>
          <div class="an">
            <span>+ 关注</span>
          </div>
        </div>
      </div>

    </div>
    <div class="huigu-bottom">
      <div class="huigu-p">
        <div class="huigu">精彩现场回顾</div>
        <div class="huigu-box">
          <div class="title">
            <div class="huigu-bt">《爱很简单》 陶喆、马思唯惊喜合体！</div>
            <video
              data-v-4c7f1e61=""
              src="https://vod.pipi.cn/fec9203cvodtransbj1251246104/a70a8bb35285890811957544229/v.f42905.mp4"
              poster="https://p1.meituan.net/movie/e94621f2223083ec2bb28ae10a81855353071.jpg"
              preload="none"
              controls="controls"
              controlslist="nofullscreen nodownload"
              playsinline="true"
              webkit-playsinline="true"
              width="100%"
              height="auto"
              data-id="637"
              class="huigu-sp"
            ></video>
            <div class="user">
              <span class="avator"></span>
              <span class="user-name">倾听音乐之声</span>
            </div>
          </div>
        </div>
        <div class="huigu-box">
          <div class="title">
            <div class="huigu-bt">《爱很简单》 陶喆、马思唯惊喜合体！</div>
            <video
              data-v-4c7f1e61=""
              src="https://vod.pipi.cn/fec9203cvodtransbj1251246104/a70a8bb35285890811957544229/v.f42905.mp4"
              poster="https://p1.meituan.net/movie/e94621f2223083ec2bb28ae10a81855353071.jpg"
              preload="none"
              controls="controls"
              controlslist="nofullscreen nodownload"
              playsinline="true"
              webkit-playsinline="true"
              width="100%"
              height="auto"
              data-id="637"
              class="huigu-sp"
            ></video>
            <div class="user">
              <span class="avator"></span>
              <span class="user-name">倾听音乐之声</span>
            </div>
          </div>
        </div>
        <div class="huigu-box">
          <div class="title">
            <div class="huigu-bt">《爱很简单》 陶喆、马思唯惊喜合体！</div>
            <video
              data-v-4c7f1e61=""
              src="https://vod.pipi.cn/fec9203cvodtransbj1251246104/a70a8bb35285890811957544229/v.f42905.mp4"
              poster="https://p1.meituan.net/movie/e94621f2223083ec2bb28ae10a81855353071.jpg"
              preload="none"
              controls="controls"
              controlslist="nofullscreen nodownload"
              playsinline="true"
              webkit-playsinline="true"
              width="100%"
              height="auto"
              data-id="637"
              class="huigu-sp"
            ></video>
            <div class="user">
              <span class="avator"></span>
              <span class="user-name">倾听音乐之声</span>
            </div>
          </div>
        </div>
        <div class="huigu-box">
          <div class="title">
            <div class="huigu-bt">《爱很简单》 陶喆、马思唯惊喜合体！</div>
            <video
              data-v-4c7f1e61=""
              src="https://vod.pipi.cn/fec9203cvodtransbj1251246104/a70a8bb35285890811957544229/v.f42905.mp4"
              poster="https://p1.meituan.net/movie/e94621f2223083ec2bb28ae10a81855353071.jpg"
              preload="none"
              controls="controls"
              controlslist="nofullscreen nodownload"
              playsinline="true"
              webkit-playsinline="true"
              width="100%"
              height="auto"
              data-id="637"
              class="huigu-sp"
            ></video>
            <div class="user">
              <span class="avator"></span>
              <span class="user-name">倾听音乐之声</span>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({})
}
</script>
<style lang="scss" scoped>
.appbox {
  width: 100%;
  height: 2460px;
}
.head {
  background-color: #292931;
  width: 100%;
  height: 180px;
  background-image: url("https://p1.meituan.net/scarlett/5b8fef5ad66febf0f783f2decbfa283b120523.png");
}

.guanzhu {
  width: 81px;
  height: 36px;
  line-height: 36px;
  background: hsla(0, 0%, 100%, 0.23);
  border-radius: 22px;
  color: #fff;
  margin-left: 300px;
  margin-top: 50px;
  position: relative;
  top: -70px;
}

.guanzhu .zhu {
  width: 8px;
  height: 8px;
  color: #fff;
  position: relative;
  margin-left: 12px;
}
.guan {
  margin-left: 10px;
}

.head img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: no-repeat 50% / cover;
  position: relative;
  top: 40px;
  left: 20px;
}

.name {
  color: #fff;
  flex: auto;
  margin-left: 120px;
  text-align: left;
  position: relative;
  top: -106px;
}
.ch-name {
  font-size: 20px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 700;
}
.hint {
  width: 226px;
  height: 33px;
  line-height: 33px;
  padding-left: 7px;
  position: absolute;
  right: 44px;
  top: 110px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #fff;
  background: #000;
  opacity: 0.5;
  border-radius: 5px;
  text-align: left;
}
.hint .jtou {
  width: 0;
  height: 0;
  border-bottom: 7px solid #000;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  position: absolute;
  top: -7px;
  right: 41px;
}
.hint span {
  box-sizing: inherit;
}

.con {
  height: 80px;
  background: #ffffff;
}
.con > div {
  width: 100%;
  height: 100%;
}
.con div strong {
  width: 100%;
  height: 100px;
  font-size: 27px;
  margin-left: 18px;
  position: relative;
  top: 26px;
}
.box {
  width: 100%;
  height: 114px;
  background: #ffffff;
  margin-top: 20px;
}
.tu-left {
  background-image: url("https://p0.meituan.net/myvideodistribute/4fad22e063e95d82f71da10ef87f4bfb41194.png@168w_228h_1c_1e");
  background-size: 100%;
  width: 84px;
  height: 114px;
  float: left;
  margin-left: 20px;
}
.box > span {
  float: left;
  font-weight: 600;
  font-size: 18px;
  margin-left: 10px;
}
.box > .shijie {
  width: 250px;
  font-family: PingFangSC-Regular;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  float: left;
  color: #888;
  margin-left: 10px;
}
.didian {
  float: left;
  margin-left: 10px;
  color: #888;
  width: 260px;
}
.yuyue {
  width: 26px;
  height: 20px;
  color: #ff772d;
  background: pink;
  font-size: 12px;
  float: left;
  line-height: 20px;
  margin-left: -260px;
  margin-top: 46px;
}
.conten {
  background: #ffffff;
}
.follow {
  width: 100%;
  position: fixed;
  bottom: 10px;
  left: 0;
  padding: 0 10px;
  z-index: 1000;
}
.inner {
  display: flex;
  align-items: center;
  padding: 8px 18px;
  font-size: 13px;
  background-color: #fff;
  box-shadow: 0 4px 8px 0 #afafaf;
  border-radius: 6px;
  // display: none;
}
.tx {
  background-image: url("https://p0.meituan.net/movie/735c6d41ab8b2fea6d24044cf240be5755223.jpg");
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
}
.wz {
  flex: 1 1 auto;
  text-align: left;
  margin-left: 15px;
}
.an {
  width: 73px;
  height: 32px;
  line-height: 32px;
  align-items: center;
  background: linear-gradient(317deg, #fa3a3d, #f04b37);
  border-radius: 22px;
  color: #fff;
}
.an span {
  padding-left: 14px;
}
.xunyan {
  // display: flex;
  float: left;
  margin-bottom: 15px;
  margin-left: 20px;
  margin-top: 20px;
}
.xun-top {
  // display: flex;
  float: left;
  margin-bottom: 15px;
  margin-left: 0px;
}
.left-tu {
  position: relative;
  float: left;
}
.bigtu {
  width: 99px;
  height: 134px;
  box-shadow: 0 0 0 3px #d7ba88;
  border-radius: 6px;
}
.xuntu {
  height: 18px;
  width: 40px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
.right-zi {
  flex: 1 1 auto;
  padding-left: 14px;
  float: left;
  margin-left: 5px;
}
.xun-bt {
  display: flex;
  align-items: center;
}
.xun-bt img {
  width: 27px;
  height: 47px;
  display: block;
}
.xunyan-smtu {
  transform: rotateY(180deg);
  width: 27px;
  height: 47px;
  display: block;
}
.xun-name {
  max-height: 54px;
  margin-bottom: 8px;
  min-height: 60px;
  font-size: 17px;
  line-height: 26px;
  font-weight: 700;
  color: #111;
  box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: left;
}
.xun-biao {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #ad907b;
  line-height: 17px;
}
.xun-bottom {
  position: relative;
  margin-top: 10px;
  padding: 8px;
  display: flex;
  float: left;
  background: #f9f9f9;
  height: 70px;
  border-radius: 8px;
  justify-content: space-between;
  color: #111;
  box-sizing: inherit;
  text-align: center;
  font-size: 14px;
  width: 100%;
}
.yan-didian {
  min-width: 5.18rem;
  height: 54px;
  margin-right: 10px;
  background: #f0f0f0;
  border-radius: 3px;
  font-size: 18px;
  line-height: 25px;
  font-weight: 700;
  position: relative;
  padding-top: 12px;
  color: #111;
  box-sizing: inherit;
  text-align: center;
  font-size: 14px;
}
.yan-didian > span {
  font-size: 18px;
  line-height: 25px;
  font-weight: 700;
}
.yan-time {
  position: relative;
  width: 100%;
  padding-top: 7px;
  line-height: 17px;
  font-family: PingFangSC-Medium, PingFang SC;
  text-align: left;
  color: #111;
  box-sizing: inherit;
  text-align: center;
  font-size: 14px;
}
.yan-qiang {
  color: #f0302d;
  flex: 0 0 auto;
  align-self: center;
  font-size: 14px;
}
.label {
  font-size: 0.75rem;
  font-weight: 700;
  position: relative;
  left: -54px;
}
.dat {
  position: absolute;
  margin-top: 5px;
  font-family: DINAlternate-Bold, DINAlternate;
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
}
.qiangpiao {
  float: right;
  min-width: 4.15rem;
  padding: 0 0.625rem;
  height: 1.875rem;
  line-height: 1.875rem;
  font-size: 0.8125rem;
  color: #fff;
  background: linear-gradient(317deg, #fa3a3d, #f04b37);
  border-radius: 20px;
  // box-shadow: 0 3px 4px 0 rgb(255 173 173 / 50%);
  font-family: PingFangSC-Medium, PingFang SC;
  margin-right: 17px;
}
.jinan {
  width: 100%;
}

.huigu {
  font-size: 22px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 700;
  padding: 23px 0 4px;
  text-align: left;
  margin-left: 24px;
}
.huigu-p {
  padding: 0 15px;
  margin-top: 10px;
}
.huigu-box {
  padding: 16px 0 15px;
  border-bottom: 1px solid #e9e9e9;
}
.huigu-bt {
  font-size: 17px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 700;
  color: #111;
  line-height: 24px;
  text-align: left;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-left: 24px;
}
.huigu-sp {
  margin: 16px auto 17px;
  position: relative;
  height: auto;
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
  display: inline-block;
  vertical-align: baseline;
  object-fit: fill;
}
.avator {
  background-image: url("https://p0.meituan.net/moviemachine/413b5a0de19464e931ffc5aa2a9db426224005.png");
  display: inline-block;
  height: 22px;
  width: 22px;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50%;
}
.user {
  text-align: left;
  display: inline-block;
  width: 100%;
  color: #111;
}
.user-name {
  margin-left: 9px;
  vertical-align: 6px;
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #666;
}
</style>
